<style lang="less">
    @import './index.less';
</style>

<template>
    <div>
        <Row :gutter="10">
            <i-col span="6">
                <div class="page-content">
                    <Row style="height: 24px;line-height: 24px;margin-bottom: 10px;">
                        <i-col>
                            <Input v-model="searchKey" placeholder="关键字" style="width: 100px;" size="small"></Input>
                            <Button type="primary" size="small">
                                <Icon type="search"/>
                                查询
                            </Button>
                        </i-col>
                    </Row>
                    <Table border
                           highlight-row
                           :context="self"
                           :loading="tableLoading"
                           :columns="tableColumn"
                           :data="tableData"
                           @on-selection-change="tableSelectionChange"
                           @on-current-change="tableRowChange">

                    </Table>
                </div>
            </i-col>

            <i-col span="18">
                <Card>
                    <p slot="title">
                        资源服务:{{entitiesData.name}}
                        <small>{{entitiesData.desc}}</small>
                        <Button type="primary" size="small" class="pull-right" @click="saveEntities">
                            刷新资源
                        </Button>
                    </p>
                    <div>
                        <Row :gutter="10">
                            <i-col v-for="entity in entitiesData.entities" :key="entity.entityName" span="6">
                                <Card v-for="field in entity.entityFields" :key="entity.tagetColumn" style="margin-bottom: 10px">
                                    <p slot="title">
                                        {{entity.entityName}}
                                    </p>
                                    <div>
                                        <p>列名 : {{field.tagetColumn}}</p>
                                        <p>描述 : {{field.tagetColumnDesc}}</p>
                                        <p>类型 : {{field.tagetColumnType}}</p>
                                    </div>
                                </Card>
                            </i-col>
                        </Row>
                    </div>
                </Card>
            </i-col>
        </Row>
    </div>
</template>

<script>
  import colomn from './column';
  export default {
    data () {
      return {
        self: this,
        searchKey: '',
        tableLoading: false,
        tableData: [],
        tableColumn: colomn,
        entitiesData: {name: '', desc: '', entities: []}
      };
    },
    methods: {
      loadData () {
        let self = this;
        this.$http.get('/sys/resources')
          .then(
            (res) => {
              res.data[0]._highlight = true;
              self.tableData = res.data;
              self.tableRowChange(res.data[0], null);
            })
          .catch(
            (err) => {
              this.$Message.error(err.message);
            });
      },
      tableSelectionChange (selection) {
        this.appSelection = selection;
      },
      tableRowChange (row, oldRow) {
        let self = this;
        this.$http.get('/' + row.resourceName + '/entities')
          .then((res) => {
            self.entitiesData = res.data;
          })
          .catch(() => {
            self.$Message.error('获取资源基本信息失败');
          });
      },
      saveEntities () {
        this.$Message.loading({content: '刷新实体[' + this.entitiesData.desc + ']信息', duration: 0, top: 200});
        this.$http.post('/sys/entities/endpoint', this.entitiesData)
          .then(
            (res) => {
              this.$Message.destroy();
            })
          .catch(
            (err) => {
              this.$Message.destroy();
              this.$Message.error(err.message);
            });
      }
    },
    components: {},
    computed: {},
    watch: {},
    mounted () {
      this.loadData();
    }
  };
</script>
